<template>
    <div class="home">
        <cube-scroll ref="scroll" :data="homeData.topList" @pulling-down="pullDown" @pulling-up="pullUpLoad" :options="options">
            <div class="con">
                <div class="top">
                    <div class="slide">
                        <cube-slide :data="topBannerList">
                            <cube-slide-item v-for="(item, index) in topBannerList" :key="index">
                                <a >
                                    <img class="img" :src="imgDomain+item.img">
                                </a>
                            </cube-slide-item>
                        </cube-slide>
                    </div>
                </div>
                <cube-slide class="toS" :data="advList">
                    <cube-slide-item>
                        <img src="./sjyx.png" @click="toSjyx()">
                    </cube-slide-item>
                    <cube-slide-item>
                        <img src="./turn.png" @click="turn('/lottery')">
                    </cube-slide-item>

                </cube-slide>
<!--                <menubar ></menubar>-->
                <menubanner :banners1="centerBannerList" :banners2="bottomBannerList" style="margin-top: 11px"></menubanner>
                <toplist :items="homeData.topList"></toplist>
            </div>
        </cube-scroll>
    </div>


</template>

<script>
    import menubar from '@/components/menu-bar'
    import menubanner from '@/components/menu-banner'
    import toplist from '@/components/top-list'
    import {topList, bannerList} from "@/api/home";

    export default {
        created() {
            this.refreshHome()
        },
        computed:{
            topBannerList() {
               return  this.homeData.bannerList.filter(banner=>{
                    return banner.type === 0
                })

            },
            bottomBannerList(){
               return  this.homeData.bannerList.filter(banner=>{
                    if(banner.type ===2){
                        banner.img = this.imgDomain + banner.img
                    }
                    return banner.type === 2
                })
            },
            centerBannerList(){
                return this.homeData.bannerList.filter(banner=>{
                    if(banner.type ===1){
                        banner.img = this.imgDomain + banner.img
                    }
                    return banner.type === 1
                })
            }

        },
        methods: {
            pullDown() {
                this.refreshHome()
            },
            pullUpLoad() {
                this.getTopList(this.page)
            },
            getBannerList() {
                bannerList().then(res => {
                    this.homeData.bannerList = res.data
                })
            },
            getTopList(page) {
                topList(page).then(res => {

                    if(this.page==1){
                        this.homeData.topList = res.data
                    }else {
                        this.homeData.topList= this.homeData.topList.concat(res.data)

                    }
                    this.page ++
                })
            },
            refreshHome() {
                this.getBannerList();
                this.getTopList(this.page)
            },
            toSjyx(){
                this.$router.push({
                    path:'/my?flag=1'
                })
            },
            turn(path){
                this.$router.push({
                    path
                })
            }
        },
        data() {
            return {
                page:1,
                imgDomain: process.env.VUE_APP_IMG_DOMAIN,
                homeData: {
                    bannerList: [],
                    topList: []
                },
                options: {
                    pullDownRefresh:{
                        txt:' ',
                        stopTime:0
                    },
                    pullUpLoad: true,
                },
                advList:[
                    {url:require('./sjyx.png'),id:0},
                    {url:require('./turn.png'),id:1}
                ]
            }
        },
        components: {
            menubar, menubanner, toplist
        }
    }
</script>

<style scoped lang="stylus">
    .home
        width 100%
        height 100%
        overflow hidden
        background url("~@/assets/hbg.png") no-repeat $page-bg
        background-size 100% auto

        .con
            padding-top 10px
            /*.top-list*/
            /*    width 100%*/
            .top
                margin-bottom 10px
                padding 0 10px

                .slide
                    overflow hidden
                    border-radius 10px

                    .img
                        height 141px
                        width 100%
        .toS
            width 375px
            height 148px
            img
                width: 375px
                height: 148px


</style>
